<template>
  <div class="container" :style="containerStyle">
    <uv-swiper :interval="5000" :indicator="true" :circular="true" @change="e => current = e.current" :list="list" keyName="image" height="60vh" :current="current">
    </uv-swiper>
    <view class="fz12 textCenter content" v-if="list.length">{{list[current].content}}</view>

    <view class="indicator flex">
      <view class="indicator__dot" v-for="(item, index) in list" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
    </view>

    <view class="next" @click="next">
      <image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/05/17280602538391662.png" mode="aspectFill" />
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let list = ref([]);
let current = ref(0);

let containerStyle = computed(() => {
  return {
    paddingTop: `${counter.navBarHeight}px`,
  };
});

onShow(() => {
  getInfo();
});

async function getInfo() {
  list.value = await proxy.$apis.getIndexScreenDetail();
}

function next() {
  if (current.value < list.value.length - 1) {
    current.value++;
  } else {
    proxy.$utils.toLink("/packagePages/login/login");
  }
}
</script>



<style lang="scss" scoped>
.content {
  padding: 15px 30px;
  color: #16056b;
  height: 60px;
}
.indicator {
  justify-content: center;
  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: #e2e7f4;
    margin: 0 5px;
    transition: background-color 0.3s;
    &--active {
      background-color: #f05d89;
      width: 18px;
    }
  }
}
.next {
  width: 96px;
  height: 96px;
  margin: 20px auto;
  image {
    width: 100%;
    display: block;
    height: 100%;
  }
}
</style>